<template>
    <el-row>
        <el-col :span="12" class="white-block">
            <p>普通轮播图</p>
            <carousel :height="carousel11.height" :data="carousel11.data" ref="carousel1"></carousel>
            <p class="mt20">卡片类型轮播图</p>
            <carousel :height="carousel12.height" :trigger="carousel12.trigger" :data="carousel11.data"
                      :autoplay="carousel12.autoplay"
                      :initial-index="carousel12.initialIndex" :indicator-position="carousel12.indicatorPosition"
                      :arrow="carousel12.arrow" :type="carousel12.type" ref="carousel2"></carousel>
            <p>纵向轮播图</p>
            <carousel :height="carousel13.height" :direction="carousel13.direction" :data="carousel11.data"
                      ref="carousel3"></carousel>
            <p class="mt20">自定义轮播图内容</p>
            <carousel :height="carousel11.height" :arrow="carousel11.arrow" ref="carousel1">
                <el-carousel-item v-for="item in 4" :key="item">
                    <div class="title">自定义内容</div>
                </el-carousel-item>
            </carousel>
        </el-col>
        <el-col :span="11" :offset="1" class="white-block">
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="参数名">
                </el-table-column>
                <el-table-column
                    prop="usage"
                    label="参数用法">
                </el-table-column>
                <el-table-column
                    prop="info"
                    label="参数说明">
                </el-table-column>
                <el-table-column
                    prop="choice"
                    label="可选值">
                </el-table-column>
                <el-table-column
                    prop="default"
                    label="默认值">
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>

<script>
    import carousel from '../../components/carousel'

    export default {
        name: 'example-carousel',
        data() {
            return {
                tableData: [],
                carousel11: {
                    height: '200px',
                    data: [1, 2, 3, 4],
                    arrow: 'always'
                },
                carousel12: {
                    height: '200px',
                    trigger: 'click',
                    autoplay: false,
                    initialIndex: 1,
                    indicatorPosition: 'outside',
                    arrow: 'never',
                    type: 'card'
                },
                carousel13: {
                    height: '200px',
                    direction: 'vertical'
                }
            }
        },
        mounted() {
            let tableData = [
                {
                    name: 'height',
                    usage: ':height',
                    info: '轮播图高度',
                    choice: '-',
                    default: '300px'
                },
                {
                    name: 'trigger',
                    usage: ':trigger',
                    info: '底部指示器的触发方式',
                    choice: 'click',
                    default: 'hover'
                },
                {
                    name: 'autoplay',
                    usage: ':autoplay',
                    info: '是否自动切换',
                    choice: 'true/false',
                    default: 'true'
                },
                {
                    name: 'interval',
                    usage: ':interval',
                    info: '自动切换的时间间隔',
                    choice: '-',
                    default: '3000'
                },
                {
                    name: 'initial-index',
                    usage: ':initialIndex',
                    info: '初始状态激活的幻灯片的索引',
                    choice: '-',
                    default: '0'
                },
                {
                    name: 'indicator-position',
                    usage: ':indicatorPosition',
                    info: '底部指示器位置',
                    choice: 'outside/none',
                    default: '-'
                },
                {
                    name: 'arrow',
                    usage: ':arrow',
                    info: '左右箭头显示时机',
                    choice: 'always/hover/never',
                    default: 'hover'
                },
                {
                    name: 'type',
                    usage: ':type',
                    info: '轮播类型',
                    choice: 'card',
                    default: '-'
                },
                {
                    name: 'loop',
                    usage: ':loop',
                    info: '轮播类型',
                    choice: 'true/false',
                    default: 'true'
                },
                {
                    name: 'direction',
                    usage: ':direction',
                    info: '轮播图展示方向',
                    choice: 'horizontal/vertical',
                    default: 'horizontal'
                }
            ]
            this.tableData = tableData
        },
        methods: {},
        components: {
            carousel
        }
    }
</script>

<style scoped lang="less">

</style>
